<template>
    <my-dialog v-model="dlgVisible" width="500px" :title="title?title:(typeOf=='image'?'图片':'文字')">
        <image-uploader v-model="editValue" :disabled="disabled" v-bind="imgProps" v-if="typeOf=='image'" />
        <div v-if="typeOf=='text'" >
            <label v-if="textLabel">{{ textLabel }}</label>
            <AudioText v-model="editValue" type="textarea" :rows="10" :disabled="disabled" />
        </div>
        <div v-if="needSign" >
            <label>签名</label>
            <HandWriteBoard v-model="signValue" :disabled="disabled" />
        </div>
        <template #footer>
            <div style="display:flex">
                <el-button v-if="!disabled && !required" type="danger" @click="handleClear">清除</el-button>
                <div style="flex:1"></div>
                <el-button @click="dlgVisible=false">取消</el-button>
                <el-button v-if="!disabled" type="primary" @click="handleOk">确定</el-button>
            </div>
        </template>
    </my-dialog>
</template>

<script setup>
    import { ref } from 'vue';
    import AudioText from './AudioText.vue';

    const props = defineProps({
        modelValue: String,
        disabled: Boolean,
        title: String,
        textLabel:String,
        required: Boolean,
        imgProps:Object,
        needSign:Boolean,
        size: {
            type: Number,
            default: 20
        },
        typeOf: String,//text/image
    })
    const emits = defineEmits(["update:modelValue"]);


    const dlgVisible = ref(false);
    const editValue = ref(props.modelValue);
    const signValue = ref("");

    const handleOk = function () {
        if (!props.disabled) {
            if (props.required && !editValue.value) {
                let lb = props.textLabel || "内容";
                $msg.error(`${lb}不能为空`);
                return;
            }
            if(props.needSign && !signValue.value){
                $msg.error("请签名");
                return;
            }
            if(props.needSign){
                emits("update:modelValue", editValue.value, signValue.value);
            }else{
                emits("update:modelValue", editValue.value);
            }
        }
        dlgVisible.value = false;
    }

    const handleClear = function () {
        if (!props.disabled) {
            if(props.needSign){
                emits("update:modelValue", "","");
            }else{
                emits("update:modelValue", "");
            }
        }
        dlgVisible.value = false;
    }

    const open = function () {
        dlgVisible.value = true;
    }

    const close = function () {
        dlgVisible.value = false;
    }

    defineExpose({
        open,
        close
    })

</script>

<style scoped>
</style>